<script setup>
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

const props = defineProps({
  title: {
    type: String,
    default: '温馨提示：'
  },
  content: {
    type: String,
    default: '系统出错了!'
  },
  button_text: {
    type: String,
    default: '确定'
  },
  def_button: {
    type: Boolean,
    default: true
  }
})

const mod = defineModel({
  default:true
})

</script>

<template>
  <view class="dia_back" v-if="mod">
    <view class="mod">

      <view class="mod_title">
        <text>{{title}}</text>
      </view>

      <view class="mod_media">
          <view>{{content}}</view>
      </view>

      <view class="mod_bom">
          <slot name="default"></slot>
          <button v-if="def_button" @click="mod = !mod">{{button_text}}</button>
      </view>

    </view>
  </view>
</template>

<style scoped lang="scss">
.dia_back {
  .mod {
    .mod_bom {
      button:after {
        border: none;
      }
      button{
        background: white;
      }
      padding: 5px;
      text-align: center;
      font-size: 4vw;
      border-top: 1px solid #f4f4f4;
    }
    .mod_media {
      padding: 20px;
      text-align: left;
    }
    .mod_title {
      padding: 6px 10px;
      text-align: left;
      font-size: 4vw;
      color: black;
      font-weight: 600;
      background-color: #d98a2761;
    }
    width: 90%;
    height: fit-content;
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
  }
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index:1000;
}


</style>